<template>
  <div class="container-fluid">
    <div class="row center-block">
      <div class="col-md-12">
        <div class="row">
          <div class="col-md-12">
            <div class="box-body">
              <div class="box box-primary">
                <div class="box-header with-border">
                  <h3 class="box-title">在职人员花名册</h3>
                  <div class="box-tools pull-right">
                    <el-button type="success" @click="showQuery">
                      <i class='fa fa-search'>高级查询</i>
                    </el-button>
                    <el-button type="primary" @click='()=>isExport = true'>
                      <i class='fa fa-cloud-download'>导出当前结果</i>
                    </el-button>
                  </div>
                </div>
                <div class="box-body">
                  <section class="content" id="funcDetail">
                    <div class="row">
                      <el-table stripe :sort-change="sortChanged" :empty-text="emptyText" :row-key='id' :highlight-current-row='true' :data="users" border style="width: 100%">
                        <el-table-column fixed type='index' :index="indexMethod" label="序号" :width='80'></el-table-column>
                        <el-table-column v-for='col in this.columns' :key="col.prop" :fixed='col.fixed?col.fixed:false' :width='col.width' :prop='col.prop' :label='col.label' :sortable='col.sortable' :formatter='col.formatter' ></el-table-column>
                      </el-table>
                    </div>
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizes" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                  </section>
                </div>
              </div>
            </div>
          </div>
          <el-dialog title='高级查询' :visible.sync="queryVisible" :modal="false" size="small">
            <UserQuery ref='userQuery'></UserQuery>
            <span slot="footer" class="dialog-footer">
              <el-button @click="queryVisible = false">关 闭</el-button>
              <el-button type="primary" @click="queryOnJobRegister">查 询</el-button>
            </span>
          </el-dialog>
        </div>
      </div>
    </div>

    <el-dialog title='导出数据' v-if="isExport" :visible.sync="isExport" :before-close="()=>isExport = false" :modal="true" width="20%">
      <ExportUserData ref='exportUserDataView'></ExportUserData>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="exportdata">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
import Utils from '../../common/utils'
import PersonUtils from "../../common/personUtils"
import ExportUserData from "../mycomponents/users/ExportUserData"
import UserQuery from "../mycomponents/users/userQuery"
let util= new Utils()
let personUtil = new PersonUtils()
export default {
  name: 'OnJobUsers',
  components: {
    UserQuery,
    ExportUserData
  },
  data: function() {
    return {
      id: 'id',
      emptyText: '空',
      queryVisible:false,
      total: 0,
      pageSizes: [10, 20, 30, 40, 50],
      pagesize: 10,
      currentPage: 1,
      queryData: util.getDefaultUserQueryData(1),
      users: [],
      columns: util.getOnJobUsersColumns(),
      isExport:false
    }
  },
  created: function() {
    this.$nextTick(() => {
      this.getData()
    })
  },
  methods: {
    showQuery(){
      this.queryVisible = true
    },
    sortChanged(sortProp) {
      this.queryData.orders.fields = sortProp.prop
      this.queryData.orders.desc = sortProp.order
    },
    getSexName(sex) {
      return this.utils.getSexName(sex)
    },
    clearQueryData(e) {
      console.log('clear query data')
    },
    exportdata() {
      var filename = this.$refs.exportUserDataView.getData()
      if(filename){
        personUtil.exportData(this.queryData,filename.fileName,1)
        this.isExport = false
      }
    },
    queryOnJobRegister(e) {
      console.log('queryOnJobRegister')
      this.queryData.conditions = this.$refs.userQuery.getData()
      this.queryData.page.count = this.pagesize
      this.currentPage = 1
      this.queryData.page.number = this.currentPage -1
      this.getData()
      this.queryVisible = false
    },
    indexMethod(index){
      return this.pagesize * (this.currentPage -1) + index + 1
    },
    getData() {
      var that = this
      util.queryUserData(this.queryData, function(response) {
        that.users = response.body.body.rows
        that.total = response.body.body.total
      }, function(response) {
        console.log('query failed:' + response.data)
      })
    },
    handleSizeChange(val) {
      this.pagesize = val
      this.queryData.page.count = this.pagesize
      this.getData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.queryData.page.number = this.currentPage -1
      this.getData()
    }
  }
}
</script>